
<template>
  <div class="home app_content">

    <div class="header_body">
      <header-nav :leftArrow="false" titelText="首页"></header-nav>
    </div>
    <!-- 轮播图部分 -->
    <div class="warp_body">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
      </van-swipe>
      <!-- 磅单信息部分 -->
      <div class="flex">
        <div class="pangbox">
          <router-link to="realTimeWeighing">
            <div class="linsbox">
              <div class="cicle"></div>
              <div class="orz">{{poundValue>1? 1:0}}</div>
              <div class="textline" style=" text-decoration: underline;">实时过磅</div>
            </div>
          </router-link>
        </div>
        <div class="pangbox">
          <router-link to="weightManagement">
            <div class="linsbox">
              <div class="cicle" style="background: rgba(115,103,240,0.12);"></div>
              <div class="orz">{{listData}}</div>
              <div class="textline">过磅管理</div>
            </div>
          </router-link>
        </div>
        <div class="pangbox">
          <router-link to="weighingRecord">
            <div class="linsbox">
              <div class="cicle" style="background: rgba(234,84,85,0.12);"></div>
              <div class="orz">{{ formData}}</div>
              <div class="textline">场内车辆</div>
            </div>
          </router-link>
        </div>
        <div class="pangbox">
          <div class="linsbox">
            <div class="cicle" style="background: rgba(0,207,232,0.12);"></div>
            <div class="orz">0</div>
            <div class="textline">暂无</div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script>
import headerNav from "@/components/common/headerNav.vue";
import footerNav from "@/components/common/footerNav.vue";
import api from "@/api/index.js";
import { ref, onMounted, reactive, toRefs } from "vue";
export default {
  name: "Home",
  components: {
    headerNav,
    footerNav,
  },
  setup() {
    const data = reactive({
      poundValue: "",
      formData: {},
      listData: '',
    });

    const methods = reactive({
      // 场内车辆数量
      async paginationpassPoundRecord() {
        let page = {
          pageSize: 9,
          current: 1,
        };
        let params = {
          carNumber: "",
          matterName: "",
          orderNumber: "",
          orderType: "",
          poundNumber: "",
          poundType: "",
          recordBelong: "",
          status: 0,
        };
        let res = await api.paginationpassPoundRecord(page, params);
        data.formData = res.recordsTotal;
        console.log(data.formData);
      },
      // 过磅管理
      async paginationpassPoundBill() {
        let page = {
          pageSize: 9,
          current: 1,
        };
        let params = {
          billBelong: "",
          carNo: "",
          createTime: "",
          datePicker: [],
          endTime: "",
          goodsName: "",
          poundNo: "",
          status: 0,
        };
        let res = await api.paginationpassPoundBill(page, params);
        data.listData = res.recordsTotal;
        console.log(data.listData)
      },
    });

    // 1.建立链接 -- 携带cookie参数
    //  let userId = localStorage.getItem("userId");
    let userId = "10502119-20200515-000001-0000004026-021889";
    let poundId = "ee40f6d3-628c-4cbb-8707-d2c969561476";
    let wsUrl = `ws://122.225.12.166:11481/pound`; //嘉兴地址
    // let wsUrl = `ws://122.225.12.166:11473/pound`; //黑河生产环境
    var ws = new WebSocket(`${wsUrl}/deviceWS/${userId}/${poundId}`);
    ws.onopen = () => {};
    // 2. ws.send()给服务器发送信息
    // ws.send();
    // 3.服务器每次返回信息都会执行一次onmessage方法
    ws.onmessage = (e) => {
      // console.log(e);
      // console.log(e.data);
      // console.log(JSON.parse(e.data));
      let { protocol, msg } = e.data ? JSON.parse(e.data) : {};
      if (protocol == "pound") {
        let message = msg ? JSON.parse(msg) : {};
        // console.log(message);
        // 实时回显过磅显示
        data.poundValue = message.wsCount;
        // console.log(data.poundValue>1)
      }
    };

    onMounted(() => {
      methods.paginationpassPoundRecord();
      methods.paginationpassPoundBill();
    });

    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  padding: 0 10px 0 10px;
  .warp_body {
    margin: 0;
    background: white;
    .my-swipe .van-swipe-item {
      color: rgba(255, 255, 255, 0);
      font-size: 20px;
      line-height: 180px;
      text-align: center;
      background: url("../assets/images/banner.png") no-repeat;
      background-size: 100% 100%;
    }
    .flex {
      margin-top: 10px;
      // margin-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .pangbox {
      // margin-top: 10px;
      min-width: 45vw;
      width: 45vw;
      // max-width: 50%;
      height: 150px;
      border: 1px solid rgba(245, 241, 241, 0.493);
      box-shadow: 0px 4px 10px 0px rgba(34, 41, 47, 0.1);
      border-radius: 6px 6px 6px 6px;
      .linsbox {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .cicle {
          width: 45px;
          height: 45px;
          justify-content: center;
          background: rgba(40, 199, 111, 0.12);
          border-radius: 45px 45px 45px 45px;
          opacity: 1;
        }
        .orz {
          font-size: 24px;
          font-family: Montserrat-SemiBold, Montserrat;
          font-weight: 600;
          color: #5e5873;
        }
        .textline {
          font-size: 14px;
          font-family: Montserrat-Regular, Montserrat;
          font-weight: 400;
          color: #6e6b7b;
        }
      }
    }
  }
}
</style>
